<template>
    <div class="main">
        <div class="title">
            Projects:
            <div class="creat-btn">
                <el-button @click="openCreate">
                    <i class="el-icon-plus"></i>
                    创建项目
                </el-button>
            </div>
        </div>
        <div class="item-content">
            <div class="item" v-for="(item, index) in projectList" :key=index @click="handleTo(item)">
                <div class="project-name">
                    <img :src=icon[item.projectType] alt="">
                    {{ item.projectName }}
                </div>
                <div class="count">
                    errors:2 | transctions
                </div>
                <div class="project-desc">
                    {{ item.projectDesc }}
                </div>
            </div>
        </div>
        <!-- 蒙层 -->
        <div class="cover" v-if=isShowCreate></div>
        <!-- 创建项目弹窗 -->
        <Create :isShowCreate="isShowCreate" @close="closeCreate"/>
    </div>
</template>

<script>
import { getProjectByTeam } from '../api/HomeApi';
import Create from '../components/create.vue'

export default {
    data() {
        return {
            projectList: [],
            isShowCreate: false, // 控制显示创建项目弹窗，
            icon: {
                '0' : 'https://docs.sentry.io/_next/static/media/javascript.bcdb1761.svg',
                '1' : 'https://docs.sentry.io/_next/static/media/nodejs.852a24fa.svg',
                '2' : 'https://docs.sentry.io/_next/static/media/react.bdd05676.svg'
            }
        }
    },
    components: {
        Create,
    },
    created() {
        this.getProjectByTeam()
    },
    methods: {
        getProjectByTeam() {
            const data = {
                teamId: JSON.parse(localStorage.getItem('userTeamId'))
            }
            getProjectByTeam(data).then(res => {
                this.projectList = res.data
            })
        },
        // 打开创建项目弹窗
        openCreate() {
            this.isShowCreate = true
        },
        // 关闭创建项目弹窗
        closeCreate() {
            this.isShowCreate = false
        },
        handleTo(item) {
            console.log(item,'1111111111');
            this.$router.push({
                path:'/home/projectAnlisy',
                query: item
            })
        }
    }


}
</script>

<style scoped>
.main {
    height: 100%;
    overflow: scroll;
    border: 1px solid #E4E7ED;
    background: #F5F5F5;
    border-radius: 10px;
    padding: 20px;
}

.title {
    display: flex;
    align-items: center;
}

.creat-btn {
    margin-left: auto;
}

.item {
    display: inline-block;
    padding: 15px;
    border: 1px solid #E4E7ED;
    width: calc((100% - 160px) / 3);
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
    margin-right: 20px;
    margin-top: 20px;
}

.project-name {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #1989fa;
}

.project-name img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.count {
    margin-top: 5px;
    margin-left: 10px;
    font-size: 10px;
}

.project-desc {
    margin-top: 5px;
    font-size: 12px;
    text-align: justify;
}
.cover {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}
</style>